import React from 'react';
import { Layout } from 'antd';
import { Routes, Route, Navigate } from 'react-router-dom';
import Sidebar from '../../components/layout/Sidebar';
import { monitoringMenu } from '../../constants/monitoringMenus';
import Overview from './Overview';
import DataDashboard from './DataDashboard';
import RiskDashboard from './RiskDashboard';
import RuleList from './RuleList';
import RuleConfig from './RuleConfig';
import TransactionAudit from './TransactionAudit';
import DataTracing from './DataTracing';
import RiskRecord from './RiskRecord';
import './styles.css';

const Monitoring: React.FC = () => {
  return (
    <Layout className="monitoring-layout">
      <Sidebar menuItems={monitoringMenu} basePath="/monitoring" />
      <Layout.Content className="monitoring-content">
        <Routes>
          <Route path="/" element={<Navigate to="overview" replace />} />
          <Route path="overview" element={<Overview />} />
          <Route path="data-dashboard" element={<DataDashboard />} />
          <Route path="risk-dashboard" element={<RiskDashboard />} />
          <Route path="rule-list" element={<RuleList />} />
          <Route path="rule-config" element={<RuleConfig />} />
          <Route path="transaction-audit" element={<TransactionAudit />} />
          <Route path="data-tracing" element={<DataTracing />} />
          <Route path="risk-record" element={<RiskRecord />} />
        </Routes>
      </Layout.Content>
    </Layout>
  );
};

export default Monitoring; 